<template>
  <div class="bill-board box-shadow">
    <div class="content">
      <slot></slot>
    </div>
    <div class="bg-bar">
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  components: {
   
  },
  data() {
    return {
      
    }
  },
  mounted() {
    // this.table = this.$refs.scroll
    // this.table.addEventListener('scroll', () => {
    //   this.handleScroll()
    // })
  },
  computed: {
    ...mapGetters('lottery', {
      cart: 'getCurrentCart'
    })
  }
}

</script>
<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  .bill-board
    position relative
    // height 100%
    box-sizing border-box 
    .content 
      position relative
      width 100%
      text-align center
      z-index 100
      border-radius 3px
      border 1px solid $color-divide-line
      box-sizing border-box
      // margin-bottom 50px
      &:before
        content: ''
        position: absolute
        height: 6px;
        width: 100%;
        left:0 ; right: 0;
        bottom: -1px;
        transform: rotate(180deg);
        background-image: radial-gradient(circle, #ddd, 6px, transparent 6px);
        background-size: 12px 12px;
        background-position: 0 6px
        z-index 1000
    .bg-bar
      position absolute 
      top -5px
      left 50%
      transform translateX(-50%)
      height 10px
      width 103%
      background linear-gradient(180deg, #d1d1d1, #f0f0f0)
      border-radius 5px
      border 1px solid $color-divide-line
      box-shadow 1px 3px 6px 0px rgba(0, 0, 0, 0.2)
      
</style>
